<template>
  <div class="deptComponent">
          <el-input placeholder="请输入内容" v-model="data.deptName">
               <el-button @click="selectDialogData" slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <select-dialog @onConfirm="onConfirm" v-if="isShowDialog" @close="close"/>
  </div>
</template>
<script lang="ts">
import { Component, Vue,Prop,Emit} from 'vue-property-decorator';
import SelectDialog from "@/common/form-item/template/select-dialog/dialog.vue";
@Component({
  components: {
       SelectDialog
  },
})
export default class FormInput extends Vue {
     @Prop() public data!: any;
     private rules=[];
     private isShowDialog:boolean=false;
     async created(){
     }
     private selectDialogData(){
          this.isShowDialog=true;
     }
     private close(){
          this.isShowDialog=false;
     }
     //点击确认事件
     @Emit("onConfirm")
     private onConfirm(params:any){
         return params;
     }
}
</script>
<style lang="less">
    .deptComponent{
         display: flex;
         .el-input-group__append{
              cursor: pointer;
         }
         .el-dialog{
              height: 75%;
              max-height: 580px;
              top: 20%;
         }
         .el-dialog__body{
              height: calc(100% - 140px);
              padding: 0px 20px;
              .el-tree{
                  height: calc(100% - 40px);
              }
         }
         .el-dialog__title{
               font-size: 14px;
         }
    }
</style>
